@import '~components/constants.scss';

.picker_container {
  position: relative;
  border-radius: var(--default-border-radius-large);
  &.inline {
    transition: box-shadow 0.2s;

    .dropmenu {
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }

    &.focused {
      &.readOnly {
        box-shadow: none !important;
      }

      .autocomplete {
        box-shadow: none !important;
      }
      .dropmenu {
        opacity: 1;
        pointer-events: all;
      }
    }
  }
}

.picker {
  .pickerInput {
    border-radius: $base_border_radius;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background: #f2f2f2;

    &.readOnly {
      margin: 0;
      display: inline;
      padding: 0;
      background: transparent;
    }

    .autocomplete {
      flex: 1;
      min-width: 50px;
      position: unset;
      input {
        background: inherit;
        margin-top: 0px;
        margin-bottom: 0px;
      }
    }
  }
}
